<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="root">
        <student></student>
        <teacher></teacher>
        <hr>
        <children></children>
    </div>
    <div id="root2">

        <children></children>
    </div>


    <script>
        Vue.config.productionTip = false;
        // 定义组件
        const student = Vue.extend({
            template: `
            <div>
                <p>{{name}}</p>
                <p>{{age}}</p>
            </div>
            `,
            data() {
                return { name: '张三', age: 18 }
            }
        });
        const teacher = Vue.extend({
            template: `
            <div>
                <p>{{name}}</p>
                <p>{{age}}</p>
            </div>
            `,
            data() {
                return { name: '罗老师', age: 40 }
            }
        });

        const children = Vue.extend({
            template: `
            <div>
                <p>{{name}}</p>
                <p>{{age}}</p>
            </div>
            `,
            data() {
                return { name: 'xixi', age: 5 }
            }
        })

        Vue.component('children', children);

        const Vm = new Vue({
            el: "#root",
            // 注册组件
            components: {
                student,
                teacher
            },
        })
        const Vm2 = new Vue({
            el: "#root2",
        })

    </script>
</body>

</html>